<template>
    <div class="scroll" ref="scroll">
        <div class="wrap">
            <slot></slot>
        </div>
      </div>
</template>

<script>
    import betterscroll from "better-scroll"
    export default {
        name: "BScroll",
        props: {
            pullDownRefresh: {
                type: Boolean,
                default: false
            }
        },
        created() {
            this.$nextTick(() => {
                if (!this.scroll) {
                    this.scroll = new betterscroll(this.$refs.scroll, {
                        click:true,
                        pullDownRefresh: this.pullDownRefresh
                    });
                    this.$emit("bsloaded",this.scroll)
                    if (this.pullDownRefresh) {
                            this.scroll.on("pullingDown", () => {
                                this.$emit("pullingDown",this.scroll);
                            })
                    }
                } 
                else {
                    this.scroll.refresh();
                }
            })

        }
    }
</script>

<style lang="scss" scoped>
    .scroll {
        height: 100%;
        overflow: auto;
    }
</style>